<template>
    <div id='system-app'>
       <!--  <h1 class="card-title">
           <p><span>代理商配置管理</span></p>
       </h1> -->
        <div class='detail-info'>

            <!-- 支持的借款周期 -->
            <div class="card-content">
                <div class="sub-title">
                    <span class='title'>应用图标配置</span>
                </div>
                <loading v-show='loading'></loading>
                <template v-if='!loading'>
                    <upload-single v-model='configInfo.logoUrl'></upload-single>
                    <div v-if='configInfo.logoUrl' class="button auto logo-save-button" @click='saveLogo'>保存图标</div>
                </template>
            </div>

            <div class="card-content">
                <div class="sub-title">
                    <span class='title'>借款提醒</span>
                    <span class="button auto transparent tar" @click='show_modal_warn = true'>配置</span>
                </div>
                <p class='no-data' v-if='!loading && !configInfo.lendWarnWord'>暂无数据</p>
                <ul class="tag-list" v-if='!loading && configInfo.lendWarnWord'>
                    <li class="tag__item">{{configInfo.lendWarnWord || placeholder}}</li>
                </ul>
            </div>

            <div class="card-content">
                <div class="sub-title">
                    <span class='title'>还款账号</span>
                    <span class="button auto transparent tar" @click='addHandle("account")'>新增</span>
                </div>
                <loading v-show='loading'></loading>
                <p class='no-data' v-if='!loading && !records.length'>暂无数据</p>
                <div class="table-list" v-if='!loading && records.length'>
                    <table>
                        <thead class="table-list__head">
                            <tr>
                                <th>账号</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class='table-list__body have-border'>
                            <tr v-for='(item,index) in records'>
                                <td>{{ item || placeholder }}</td>
                                <td width="100">
                                    <div class='option-box'>
                                        <span class='option-button' @click='editHandle(item,index,"account")'>编辑</span>
                                        <span class='option-button' @click='removeHandle(item,index,"account")'>删除</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card-content">
                <div class="sub-title">
                    <span class='title'>每日数据邮箱账号</span>
                    <span class="button auto transparent tar" @click='addHandle("dailyEmail")'>新增</span>
                </div>
                <loading v-show='loading'></loading>
                <p class='no-data' v-if='!loading && !dailyEmailRecords.length'>暂无数据</p>
                <div class="table-list" v-if='!loading && dailyEmailRecords.length'>
                    <table>
                        <thead class="table-list__head">
                            <tr>
                                <th>账号</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class='table-list__body have-border'>
                            <tr v-for='(item,index) in dailyEmailRecords'>
                                <td>{{ item || placeholder }}</td>
                                <td width="100">
                                    <div class='option-box'>
                                        <span class='option-button' @click='editHandle(item,index,"dailyEmail")'>编辑</span>
                                        <span class='option-button' @click='removeHandle(item,index,"dailyEmail")'>删除</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card-content">
                <div class="sub-title">
                    <span class='title'>每日渠道数据邮箱账号</span>
                    <span class="button auto transparent tar" @click='addHandle("email")'>新增</span>
                </div>
                <loading v-show='loading'></loading>
                <p class='no-data' v-if='!loading && !emailRecords.length'>暂无数据</p>
                <div class="table-list" v-if='!loading && emailRecords.length'>
                    <table>
                        <thead class="table-list__head">
                            <tr>
                                <th>账号</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class='table-list__body have-border'>
                            <tr v-for='(item,index) in emailRecords'>
                                <td>{{ item || placeholder }}</td>
                                <td width="100">
                                    <div class='option-box'>
                                        <span class='option-button' @click='editHandle(item,index,"email")'>编辑</span>
                                        <span class='option-button' @click='removeHandle(item,index,"email")'>删除</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card-content">
                <div class="sub-title">
                    <span class='title'>客服电话</span>
                    <span class="button auto transparent tar" @click='show_modal_tel = true'>配置</span>
                </div>
                <loading v-show='loading'></loading>
                <p class='no-data' v-if='!loading && !configInfo.serviceCall'>暂无数据</p>
                <ul class="tag-list" v-if='!loading && configInfo.serviceCall'>
                    <li class="tag__item">{{configInfo.serviceCall || placeholder}}</li>
                </ul>
            </div>

            <div class="card-content">
                <div class="sub-title">
                    <span class='title'>放款形式</span>
                    <span class="button auto transparent tar" @click='show_modal_lend = true'>配置</span>
                </div>
                <loading v-show='loading'></loading>
                <p class='no-data' v-if='!loading && noLendType'>暂无数据</p>
                <ul class="tag-list" v-if='!loading && lendTypeList.length'>
                    <li class="tag__item" 
                        v-for='item in lendTypeList' 
                        v-if='item.value'>{{item.str || placeholder}}</li>
                </ul>
            </div>

            <!-- <div class="card-content">
                <div class="sub-title">
                    <span class='title'>芝麻信用状态</span>
                    <span @click='show_modal_zmxy = true' class="button auto transparent tar">配置</span>
                </div>
                <loading v-show='loading'></loading>
                <ul class="tag-list" v-if='!loading'>
                    <li class="tag__item">{{configInfo.zmAutoAuth | booleanToStr}}</li>
                </ul>
            </div> -->
        </div>

        <modal 
            :title='"编辑"+title'
            :show='show_modal_repay' 
            :loading='loading_save' 
            confirm-text='保存'
            @close='show_modal_repay = false'
            @confirm='save'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">{{title}}</span>
                        <div class="form-item__value">
                            <input type="text" v-model='curItem' placeholder="请输入账号">
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='编辑电话'
            :show='show_modal_tel' 
            :loading='loading_save' 
            confirm-text='保存'
            @close='show_modal_tel = false'
            @confirm='saveTel'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">电话号码</span>
                        <div class="form-item__value">
                            <input type="text" v-model='tel' placeholder="请输入电话号码">
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='编辑提醒'
            :show='show_modal_warn' 
            :loading='loading_save' 
            confirm-text='保存'
            @close='show_modal_warn = false'
            @confirm='saveWarn'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">提醒文案</span>
                        <div class="form-item__value">
                            <input type="text" v-model='warn' placeholder="请输入提醒文案">
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <confirm
            :show='show_confirm_remove'
            :title='"确认删除"+title'
            :loading='loading_save'
            @close='show_confirm_remove=false'
            @confirm='save'>
        </confirm>

        <modal 
            title='配置放款形式'
            :show='show_modal_lend' 
            :loading='loading_save' 
            confirm-text='保存'
            @close='show_modal_lend = false'
            @confirm='saveLendType'>
            <div class="modal-form-wrap">
                <ul class='modal-form' v-if='lendList.length'>
                    <li class='form-item' v-for='item in lendList'>
                        <span class="form-item__key">{{item.str}}</span>
                        <div class="form-item__value">
                            <radio-group v-model='item.value'>
                                <radio :value='true'>支持</radio>
                                <radio :value='false'>不支持</radio>
                            </radio-group>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置芝麻信用状态'
            :show='show_modal_zmxy' 
            :loading='loading_save' 
            confirm-text='保存'
            @close='show_modal_zmxy = false'
            @confirm='saveZmxy'>
            <div class="modal-form-wrap">
                <ul class="modal-form">
                    <li class='form-item'>
                        <span class="form-item__key">芝麻信用状态</span>
                        <div class="form-item__value">
                            <select-box v-model='setZmAutoAuth' text='请选择'>
                                <select-option :value='true' text='自动'></select-option>
                                <select-option :value='false' text='手动'></select-option>
                            </select-box>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>
    </div>
</template>

<script>    
    import { Promise } from 'es6-promise'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import datePicker from '../components/DatePicker.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import loading from '../components/Loading.vue'
    import tab from '../components/Tab.vue'
    import tabBox from '../components/TabBox.vue'
    import checkBox from '../components/CheckBox.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import echarts from '../components/Echarts.vue'
    import toYuan from '../filters/filter-toYuan'
    import toPercent from '../filters/filter-toPercent'
    import  { mapGetters, mapActions }  from 'vuex'
    import { systemApi, allApi, youxinApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            radioGroup,
            radio,
            selectGroup,
            selectOption,
            echarts,
            loading,
            modal,
            tab,
            tabBox,
            checkBox,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            toPercent,
            booleanToStr(boolean){
                if(boolean === true){
                    return '自动'
                }
                else{
                    return '手动'
                }
            }
        },
        data() {
            return {
                show_modal_lend:false,
                show_modal_repay:false,
                show_modal_tel:false,
                show_modal_warn:false,
                show_modal_zmxy:false,
                show_confirm_remove:false,
                setZmAutoAuth:'',
                lendTypeList:[],
                lendList:[],
                loading_lendType:false,
                configInfo:{},
                warn:'',
                type:'',
                attr:'',
                tel:'',
                recordsClone:[],
                curItem:'',
                curIndex:'',
                loading:false,
                loading_save:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            title(){
                if(this.attr == 'account'){
                    return '账号'
                }
                if(this.attr == 'email'){
                    return '邮箱'
                }
                if(this.attr == 'dailyEmail'){
                    return '邮箱'
                }
            },
            configKey(){
                if(this.attr == 'account'){
                    return 'underLineAccountNo'
                }
                if(this.attr == 'email'){
                    return 'sourceDailyDataToMail'
                }
                if(this.attr == 'dailyEmail'){
                    return 'dailtDataToMail'
                }
            },
            records(){
                if(this.configInfo.underLineAccountNo){
                    return this.configInfo.underLineAccountNo.split(',')
                }
                return []
            },
            emailRecords(){
                if(this.configInfo.sourceDailyDataToMail){
                    return this.configInfo.sourceDailyDataToMail.split(',')
                }
                return []
            },
            dailyEmailRecords(){
                if(this.configInfo.dailtDataToMail){
                    return this.configInfo.dailtDataToMail.split(',')
                }
                return []
            },
            saveRecordsStr(){
                return this.recordsClone.join(',')
            },
            noLendType(){
                let status = true
                _.each(this.lendTypeList,(value,index)=>{
                    if(value.value){
                        status = false
                        return false
                    }
                })
                return status
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function
            addTel(){

            },
            addHandle(attr){
                this.type = 'add'
                this.attr = attr
                this.curItem = '' 
                this.curIndex = -1
                this.show_modal_repay = true
            },
            editHandle(item,index,attr){
                this.type = 'edit'
                this.attr = attr
                this.curItem = item 
                this.curIndex = index 
                this.show_modal_repay = true
            },
            removeHandle(item,index,attr){
                this.type = 'remove'
                this.attr = attr
                this.curItem = item 
                this.curIndex = index 
                this.show_confirm_remove = true
            },
            getAppConfig(){
                this.loading = true
                systemApi.getAppConfig()
                .then(result=>{
                    this.configInfo = result
                    this.loading = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading = false
                })
            },
            showLoanLendType(){
                this.loading_lendType = true
                systemApi.showLoanLendType()
                .then(result=>{
                    this.lendTypeList = result
                    this.lendList = _.cloneDeep(result)
                    this.loading_lendType = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_lendType = false
                })
            },
            saveLendType(){
                this.loading_save = true
                systemApi.saveLoanLendType({
                    data:JSON.stringify(this.lendList)
                })
                .then(result=>{
                    this.setMsgTip({
                        text:'保存成功',
                        type:'success'
                    })
                    this.loading_save = false
                    this.show_modal_lend = false
                    this.showLoanLendType()
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_save = false
                })
            },
            saveLogo(){
                this.showLoading()
                systemApi.setAppConfig({
                    configKey:'logoUrl',
                    configValue:this.configInfo.logoUrl
                })
                .then(result=>{
                    this.setMsgTip({
                        text:'保存成功',
                        type:'success'
                    })
                    this.hideLoading()
                })
                .catch(error=>{
                    console.error(error)
                    this.hideLoading()
                })
            },
            save(){
                if(!this.curItem){
                    this.setMsgTip({
                        text:`请输入${this.title}`,
                        type:'warn'
                    })
                    return
                }
                if(this.attr == 'account'){
                    this.recordsClone = this.records.concat()
                }
                else if(this.attr == 'email'){
                    this.recordsClone = this.emailRecords.concat()
                }
                else if(this.attr == 'dailyEmail'){
                    this.recordsClone = this.dailyEmailRecords.concat()
                }

                if(this.type == 'add'){
                    this.recordsClone.push(this.curItem)
                }
                else if(this.type == 'remove'){
                    this.recordsClone.splice(this.curIndex,1)
                }
                else{
                    this.recordsClone.splice(this.curIndex,1,this.curItem)
                }

                this.loading_save = true
                systemApi.setAppConfig({
                    configKey:this.configKey,
                    configValue:this.saveRecordsStr
                })
                .then(result=>{
                    this.setMsgTip({
                        text:'保存成功',
                        type:'success'
                    })
                    this.show_modal_repay = false
                    this.show_confirm_remove = false
                    this.getAppConfig()
                    this.loading_save = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_save = false
                })
            },
            saveTel(){
                this.loading_save = true
                systemApi.setAppConfig({
                    configKey:'serviceCall',
                    configValue:this.tel
                })
                .then(result=>{
                    this.setMsgTip({
                        text:'保存成功',
                        type:'success'
                    })
                    this.show_modal_tel = false
                    this.getAppConfig()
                    this.loading_save = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_save = false
                })
            },
            saveWarn(){
                this.loading_save = true
                systemApi.setAppConfig({
                    configKey:'lendWarnWord',
                    configValue:this.warn
                })
                .then(result=>{
                    this.setMsgTip({
                        text:'保存成功',
                        type:'success'
                    })
                    this.show_modal_warn = false
                    this.getAppConfig()
                    this.loading_save = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_save = false
                })
            },
            saveZmxy(){
                if(this.setZmAutoAuth === ''){
                    this.setMsgTip({
                        text:'请选择芝麻信用状态',
                        type:'warn'
                    })
                    return
                }
                this.loading_save = true
                systemApi.setAppConfig({
                    configKey:'zmAutoAuth',
                    configValue:this.setZmAutoAuth
                })
                .then(result=>{
                    this.setMsgTip({
                        text:'保存成功',
                        type:'success'
                    })
                    this.show_modal_zmxy = false
                    this.getAppConfig()
                    this.loading_save = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_save = false
                })
            },
        },
        created(){
            this.getAppConfig()
            this.showLoanLendType()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #system-app{
        .logo-save-button{
            display: inline-block;
            margin-left: 27px;
            margin-top: 10px;
        }
        .form-item__value{
            flex:1;
        }
    }
</style>
